<template>
  <page>
    <view class="hint" :style="{display: price > 200 ? 'flex':'none'}">
      <text>红包金额不能超过200元</text>
    </view>
    <view class="packet-price">
      <view class="input-text">
        <view class="title">
          <text>单个金额</text>
        </view>
        <view class="content">
          <input type="number" v-model="price" placeholder="￥0.00">
        </view>
      </view>
    </view>
    <view class="greeting-info">
      <view class="input-text">
        <view class="content">
          <input type="text" v-model="greetings" placeholder="恭喜发财，大吉大利">
        </view>
      </view>
    </view>
    <view class="price-info">
      <view class="price">
        <text class="min">￥</text>
        <text v-if="price">{{ Number(price).toFixed(2) }}</text>
        <text v-else>0.00</text>
      </view>
    </view>
    <view class="packet-btn">
      <view class="btn" @click="onConfirm">
        <text>塞钱进红包</text>
      </view>
    </view>
    <view class="footer-info">
      <view class="record" @click="onRecord">
        <text>红包记录</text>
      </view>
    </view>
  </page>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import {sendRedPacket} from "../../api/wallet";
import {onLoad} from "@dcloudio/uni-app";

const {proxy} = getCurrentInstance();
const price = ref('');
const greetings = ref('恭喜发财，大吉大利');
// 参数
let to_user_id = '';

onLoad((params) => {
  to_user_id = params.to_user_id || '';
})

/**
 * 塞进红包点击
 */
function onConfirm() {
  if (!price.value) {
    proxy.$way.toast('请输入红包金额');
    return;
  }
  if (!greetings.value) {
    proxy.$way.toast('请输入祝福语');
    return;
  }
  if (price.value > 200) {
    proxy.$way.toast('红包金额不可大于200元');
    return;
  }
  sendRedPacket({
    to_user_id: to_user_id,
    price: price.value,
    greeting: greetings.value,
  }).then(res => {
    uni.$emit('redPacketData', {
      red_packet_id: res.data.red_packet_id,
      greetings: greetings.value,
    })
    uni.navigateBack();
  })
}

/**
 * 红包记录点击
 */
function onRecord() {
  uni.navigateTo({
    url: '/pages/RedPacketRecord/RedPacketRecord'
  })
}
</script>

<style scoped lang="scss">
@import "RedPacketSend.scss";
</style>
